<template>
    <div class="disbursementSchedule">
        <el-card shadow="hover" :body-style="{padding: '0px'}">
            <div class="card-box clearfix">
                <div slot="header" class="clearfix card-title">
                    <span>{{disbursementSchedule.name}}</span>
                    <el-button class="btn-more" type="text">更多 <i class="el-icon-d-arrow-right"></i></el-button>
                </div>
                <div>
                    <template>
                        <el-table :data="newsList" :show-header="false" style="padding:0px 10px">
                            <el-table-column 
                                width="80">
                                <template slot-scope="scope">
                                    <div>{{scope.row.name}}</div>
                                </template>
                                
                            </el-table-column>
                            <el-table-column  show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <div class="fontCol">{{scope.row.number}}</div>

                                </template>
                                
                            </el-table-column>
                            <el-table-column 
                                width="80">
                                <template slot-scope="scope">
                                    <div>{{scope.row.cardName}}</div>
                                </template>
                            </el-table-column>
                            <el-table-column 
                                show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <div class="cardfontCol">{{scope.row.cardNumber}}</div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template> 
                </div>
                
            </div>   
            
        </el-card>
    </div>
</template>

<script>
import { disbursementSchedule } from './data/Content.js';
export default {
    name: 'DisbursementSchedule',
    data () {
        return {
            disbursementSchedule: disbursementSchedule, 
            newsList:[],       
        };
    },
    created(){
        this.getInit();
    },
    methods: {
        getInit(){
            this.$axios.get(disbursementSchedule.url).then((res) => {
                this.newsList=res.data;
                
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.disbursementSchedule{
    .fontCol{color: #0066ff;text-align: center;}
    .cardfontCol{color: #ff6633;text-align: center;}
    .el-table::before {
        height: 0px;
    }
     .el-table th>.cell {
        padding-left: 4px;
        padding-right:4px;
    }
     .el-table .cell {
        padding-left: 4px;
        padding-right:4px;
    }
     .el-table .cell, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell{
        padding-left: 4px;
        padding-right:4px;
    }
}
    
</style>
